<!--
 * @Description:  修改订单减脂营信息
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-06-09 10:42:39
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-06-09 20:30:43
--> 
<template>
  <div class="div-inline">
    <el-button type="primary" size="mini" class="el-button-mini-5-12" @click="to"> 修改 </el-button>
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="'修改订单减脂营信息'" width="600px">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="减脂营信息" prop="service_remark">
          <el-select v-model="form.camp_id" size="small" filterable placeholder="选择减脂营" style="width: 200px;" class="filter-item">
            <el-option v-for="item in camps" :key="item.id" :label="item.camp_name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="outLoading" size="mini" type="warning" @click="outCamp">退出减脂营</el-button>
        <el-button size="small" @click="dialog = false">取消</el-button>
        <el-button :loading="loading" size="small" type="primary" @click="submitCamp">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form: {
        id: '',
        camp_id: ''
      },
      camps: [],
      dialog: false,
      outLoading: false,
      loading: false
    }
  },
  methods: {
    to() {
      this.form = {
        id: this.data.id,
        camp_id: this.data.camp_id,
      }
      this.dialog = true

      //获取减脂营的信息
      this.$api.order.camp
        .getCampList()
        .then(res => {
          this.camps = res.data
        }).catch(err => {
          console.log(err)
        })
    },
    outCamp() {
      this.form.camp_id = 0
      this.outLoading = true
      this.doSubmit()
    },
    submitCamp() {
      this.loading = true
      this.doSubmit()
    },
    doSubmit() {
      this.$api.order.service
        .updateCamp({
          data: this.form
        })
        .then(res => {
          this.$notify({ title: '提示', message: '修改减脂营成功', type: 'success', duration: 2500 })
          this.dialog = false
          this.outLoading = false
          this.$emit('init')
        }).catch(err => {
          console.log(err)
          this.dialog = false
          this.outLoading = false
          this.$notify({ title: '错误', message: '修改减脂营失败', type: 'error', duration: 2500 })
        })
    }
  }
}
</script>

<style scoped>
  .div-inline {
    display: inline;
    margin-right: 3px;
  }
</style>
